import React, { useState, useEffect, useContext } from 'react'
import { Card } from '&/appComponents/Antd'
import { Table, Button, Switch } from 'antd'
import downloadExcelImg from '&/commonjs/downloadExcelImg'
import { ActivityLevelContext } from '../context'
import dayjs from 'dayjs'
const IndustrysTable = () => {
  const { type, industryTable } = useContext(ActivityLevelContext)
  const [columns, setColumns] = useState([])
  const [dataSource, setDataSource] = useState([])
  const [checked, setChecked] = useState(false)
  useEffect(() => {
    if (industryTable == null || industryTable.length == 0) return
    const column = [
      {
        title: '行业',
        width: 100,
        dataIndex: 'industry_type',
        align: 'center'
      }
    ]
    industryTable[0].data_time.map((v, i) => {
      let format
      if (type == 3) {
        format = 'MM' + '月' + 'DD' + '日'
      } else {
        format = 'MM' + '月' + 'DD' + '日' + 'HH' + '时'
      }
      column.push({
        title: dayjs(v).format(format),
        width: 100,
        dataIndex: v,
        align: 'center',
        render: (v) => {
          return (
            <div
              style={{
                height: '40px',
                lineHeight: '40px',
                background: v !== '--' ? 'rgba(197,224,180)' : ''
              }}
            >
              {v}
            </div>
          )
        }
      })
    })
    const dataSource = industryTable.map((item) => {
      const obj = {
        industry_type: item.industry_type
      }
      item.data_time.map((v, i) => {
        let value = checked ? item.data_change : item.standard_value
        let val = [-99, -98, -97].includes(value[i])
          ? '--'
          : checked
          ? value[i] + '%'
          : value[i]
        obj[v] = val
      })
      return obj
    })
    setColumns(column)
    setDataSource(dataSource)
  }, [industryTable, checked])
  const handText = () => {
    return (
      <>
        <div style={{ display: 'flex' }}>
          变化率：
          <Switch
            checkedChildren="开启"
            unCheckedChildren="关闭"
            value={checked}
            onChange={(v) => onChecked(v)}
            style={{ marginRight: 10 }}
          />
          <Button onClick={() => onDownloadExcel()} size="small" type="primary">
            导出
          </Button>
        </div>
      </>
    )
  }
  const onDownloadExcel = () => {
    downloadExcelImg(dataSource, columns, '各行业数据分析')
  }
  const onChecked = (v) => {
    setChecked(v)
  }
  return (
    <div style={{ width: '45%', height: '45vh', overflow: 'hidden' }}>
      <Card
        size="small"
        title={handText()}
        style={{ flex: 1 }}
        // bodyStyle={{ height: 'calc(100% - 38px)' }}
      >
        <Table
          className="AreaTable"
          size="small"
          bordered
          dataSource={dataSource}
          columns={columns}
          pagination={false}
          scroll={{
            y: '35vh'
          }}
          rowKey={(row) => JSON.stringify(row)}
        />
      </Card>
    </div>
  )
}
export default IndustrysTable
